<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Block Box</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>
    <body>

        <h1>Block Box</h1>

        <div class="container">
            <div class="default_div">
                BEFORE<br />
                what does this <br />
                container do with <br />
                overflow?<br />
            </div>  

            <div class="box_1"> &uarr; <br /> 
                             Top <br /> 
                             &larr; Left &nbsp; &nbsp; &nbsp; 
                             Right &rarr; <br /> 
                             Bottom <br /> 
                             &darr;
            </div>  
            <hr />
            <div class="box_2">
                &uarr; <br />
                Top <br /> 
                &larr; Left &nbsp; &nbsp; &nbsp; 
                Right &rarr; <br /> 
                Bottom <br /> 
                &darr; <br />
                This block DOES overflow the parent box, contrary to my previous testing, by setting <code>width</code> to something greater
                than the parent's. <code>&lt;img&gt;</code> also overflows. <em>MAKE YOU INCLUDE THE MEASUREMENT, i.e. PX!!!</em>
                As for this block, setting <code>display:inline-block;</code> doesn't help!
            </div>
            <!--
            <img src="yuna.jpg" title="yuna" alt="[IMG:yuna]" />
            -->
            <hr />

            <div class="default_div">AFTER</div>  
        </div>
        <div>This text should go right after the container box, whether its CSS property <code>overflow</code> is set to <code>auto</code> or not.</div>  

        <div class="box_3">
            The <code>width</code> for this block only applies to the data area and NOT the entire block.
        </div>

        <table class="table_3">
            <tr>
                <td class="cell">
                    Cell #1, does not seem to do a thing.
                </td>
                <td class="cell">
                    Cell #2
                </td>
            </tr>
        </table>

    </body>
</html>
